<!-- 通信总结，在组件导入了mitt后可以使用 -->
<!-- 父使用provide('name',值)方式传出数据，子或隔代用emitter.emit('name', 值)的方式接受，需要接受的组件要
 提前声明const emitter = inject('emitter') -->
<template>
  <div class="app">
    <div>我是App组件</div>
    <div @click="age++">年龄: {{ age }}</div>
    <Parent />
  </div>
</template>

<script setup>
import Parent from './Parent.vue';
import { ref, provide, readonly } from 'vue';
const age = ref(18)
provide('age', readonly(age))
</script>

<style lang="scss" scoped>
.app {
  height: 500px;
  width: 1000px;
  border: 3px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>